<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js SCATTER PLOT</title>
<style>
body{
font: 10px sans-serif;
}
.axis path,
.axis line{
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot{
.stroke: #000;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.min.js"></script>
<script type="text/javascript">
var margin={top: 20, right: 20, bottom: 30, left: 40},
width=960-margin.left-margin.right,
height=500-margin.top-margin.bottom;
var svg=d3.select("body").append("svg")
.attr("width", width+margin.left+margin.right)
.attr("height", height+margin.top+margin.bottom)
.append("g")
.attr("transform", "translate("+margin.left+", "+margin.top+")");
var x=d3.scale.linear()
.range([0, width])
var y=d3.scale.linear()
.range([height, 0]);
var color=d3.scale.category10();
var xAxis=d3.svg.axis()
.scale(x)
.orient("bottom")
var yAxis=d3.svg.axis()
.scale(y)
.orient("left")
var data=[
{y:5.1, x:3.5, class: "class1"},
{y:4.9, x:3.3, class: "class1"},
{y:5.2, x:3.7, class: "class1"},
{y:4.6, x:3.4, class: "class2"},
{y:5.0, x:3.7, class: "class2"}
];
x.domain(d3.extent(data, function(d){ return d.x; })).nice();
y.domain(d3.extent(data, function(d){ return d.y; })).nice();
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d){ return x(d.x); })
.attr("cy", function(d){ return y(d.y); })
.style("fill", function(d){ return color(d.class); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, "+height+")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Sepal Width (cm)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.stype("text-anchor", "end")
.text("Sepal Length (cm)");
var legend=svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("trnasform", function(d, i){
return "translate(0, "+i*20+")";
});
legend.append("rect")
.attr("x", width-18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width-24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d){ return d; });
</script>
</body>
</html>